<template>
	<view class="cenorder">
		<view class="orderHead">
		  <!-- <view class="appTim">
			  <view class="over">支付剩余时间</view>
			  <min-countdown :targetTime="time2" countdownClass="redtim" @callback="callback"></min-countdown>
		  </view> -->
		  <view class="ordernu">
			  <view class="ordernumberwhole">
				  <view class="orderNumber">订单状态：</view>
				  <view class="numberMa">待支付</view>
				  <!-- <view class="numberMa">已支付</view> -->
				  
				  <!-- 待评价、已支付的状态都是已支付 -->
			  </view>
			  <view class="ordernumberwhole">
				  <view class="orderNumber">订单号：</view>
				  <view class="numberMa">53378897787686667</view>
			  </view>
			  <view class="shouldWhole">
				  <view class="shouldJi">应付金额：</view>
				  <!-- <view class="shouldJi">已付金额：</view> -->
				  <view class="moneyYnm">
					  <text class="moneyOne">￥</text>
					  <text class="moneyTow">800.00</text>
				  </view>
			  </view>
			  
			  <!-- 待支付、待审核 -->
			  <!-- <view class="cancel">
					<view>如您需要变更或取消订单，可直接点击</view>
					<button>取消订单</button>
			  </view> -->
			  
			  <!-- 已支付 ，待评价、退款、售后不显示这行-->
			  <view class="cancel">
					<view>如您需要申请退款，可直接点击</view>
					<button @click="refund">申请退款</button>
			  </view>
			</view>
		</view>
		
		<view class="timeModular">
			<view class="timeName">贵州海峡阳光大酒店</view>
			<view class="houseOr">
				<view class="houseFx">房型：</view>
				<view class="houseXz">行政客房</view>
			</view>
			<view class="CheckIin">入住日期：07月12日</view>
			<view class="leave">入住日期：07月13日</view>
			<view class="leave">酒店入住凭证：WFJSF123213</view>
			<view class="Tips">
				<image src="../../../static/images/user/hook.png" mode=""></image>
				<view class="Cozy">
					<view>温馨提示!</view>
					<view>您的订单确认后不可取消变更，请认真核对信息。此订单可开具增值税普通发票，成功入住后6个月内仍可申请补开发票。</view>
				</view>
			</view>
			<view class="reserveRoom">
				<view class="Reserve">预定详情：1间，共一晚</view>
				<view class="Room">房间1，姓名：刘小小</view>
			</view>
			<view class="Contact">
				<view class="Room">联系电话：15180828905</view>
				<view class="Room">邮箱：1344160559@qq.com</view>
			</view>
		</view>
		
		<!-- 占位符 -->
		<view class="zwf"></view>
		
		<!-- 底部 ，底部这里只有待付款的才显示价格，其它状态不显示-->
		
		<!-- 退款、售后 -->
		<!-- <view class="Usegot">
			<input type="button" name="" id="" value="重新提交" disabled="disabled"/>
		</view> -->
		
		<!-- 待评价 -->
		<!-- <view class="Again">
			<input type="button" name="" id="" value="再来一单" disabled="disabled" class="AgainYd"/>
			<input type="button" name="" id="" value="去评价" disabled="disabled" class="AgainLj"/>
		</view> -->
		
		<!-- 待使用 -->
		<!-- <view class="Usegot">
			<input type="button" name="" id="" value="去使用" disabled="disabled"/>
		</view> -->
		
		<!-- 待付款 -->
		<view class="Submission">
			<view>
				<view class="On-linejg">￥888.00</view>
				<view class="ctnr-linejg">在线支付</view>
			</view>
			<input type="button"  @click="btnabled()" value="立即支付" disabled="disabled"/>
		</view>
		
		<!-- 申请退款 -->
		<!-- <view class="Again">
			<input type="button" name="" id="" value="撤销" disabled="disabled" class="AgainYd"/>
			<input type="button" name="" id="" value="重新提交" disabled="disabled" class="AgainLj"/>
		</view> -->
	</view>
</template>

<script>
	export default{
		methods:{
			btnabled(){
				uni.navigateTo({
					url:'payment'
				})
			},
			refund(){
				uni.navigateTo({
					url:'refund/refund'
				})
			}
		}
	}
</script>

<style>
	@import "../../../components/personalcenter/hotelorder";
	.over{
		font-size: 32upx;
		color: #333;
	}
	.appTim{
		text-align: center;
		margin-top: 10upx;
	}
	.redtim {
	  color: #13b1eb;
	  margin: 0 auto;
	  font-size: 36upx;
	}
</style>
